﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PersonList1.aspx.cs" Inherits="repeater_PersonList1" %>

<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement" Namespace="zoyobar.shared.panzer.ui.jqueryui.plusin"
	TagPrefix="je" %>
<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement" Namespace="zoyobar.shared.panzer.web.jqueryui"
	TagPrefix="je" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title>人员排序</title>
	<link rel="stylesheet" type="text/css" href="../css/smoothness/jquery-ui-1.8.15.custom.css" />
	<script type="text/javascript" src="../js/jquery-1.6.2.min.js"></script>
	<script type="text/javascript" src="../js/jquery-ui-1.8.15.custom.min.js"></script>
	<link rel="stylesheet" type="text/css" href="../css/main.css" />
	<style type="text/css">
		#pageindex
		{
			color: #009900;
			width: 20px;
		}
	</style>
</head>
<body>
	<form id="formPersonList1" runat="server">
	<div class="title purple-title">
		人员排序
		<iframe src="../about.htm" frameborder="0" height="160" width="100%" allowtransparency="true" scrolling="no"></iframe>
	</div>
	<div class="content">
		<h2>
			说明
		</h2>
		<blockquote>
			本示例使用 Xml.<br />
			<br />
			<strong>视频解说:</strong> <a href="http://www.tudou.com/programs/view/M6aS81RVlCw/" target="_blank">
				www.tudou.com/programs/view/M6aS81RVlCw/</a>
		</blockquote>
		<h2>
			示例
		</h2>
		<blockquote>
			<table id="list" cellpadding="7" cellspacing="0" class="ui-widget ui-corner-all ui-widget-content">
				<je:Repeater ID="personList" runat="server" Selector="'#list'" IsVariable="true"
					PageSize="3" FillAsync-Url="person.ashx">
					<HeaderTemplate>
						<thead je-class="{header}">
							<tr>
								<td je-onclick="togglesort,'realname'">
									姓名 <span je-class="{sort,realname,,ui-icon ui-icon-arrow-1-n icon,ui-icon ui-icon-arrow-1-s icon}"></span>
								</td>
								<td je-onclick="togglesort,'age'">
									年龄 <span je-class="{sort,age,,ui-icon ui-icon-arrow-1-n icon,ui-icon ui-icon-arrow-1-s icon}"></span>
								</td>
								<td je-onclick="togglesort,'birthday'">
									出生日期 <span je-class="{sort,birthday,,ui-icon ui-icon-arrow-1-n icon,ui-icon ui-icon-arrow-1-s icon}"></span>
								</td>
							</tr>
						</thead>
					</HeaderTemplate>
					<ItemTemplate>
						<tr>
							<td>
								<strong>#{realname}</strong>
							</td>
							<td>
								#{age}
							</td>
							<td>
								#{birthday,jQuery.panzer.formatDate(#,'yyyy年M月d日')}
							</td>
						</tr>
					</ItemTemplate>
					<FooterTemplate>
						<tfoot>
							<tr>
								<td colspan="3">
									<a href="#" je-onclick="prev" style="color: Blue">上一页</a>&nbsp;&nbsp;<a href="#"
										je-onclick="next" style="color: Blue">下一页</a>,&nbsp; 第 @{pageindex}/@{pagecount}
									页, 共 @{itemcount} 条, <a href="#" je-onclick="goto,new Number(jQuery('#pageindex').val())"
										style="color: Blue">跳转</a>到第
									<input type="text" id="pageindex" value="@{pageindex}" />
									页.
								</td>
							</tr>
						</tfoot>
					</FooterTemplate>
				</je:Repeater>
			</table>
		</blockquote>
	</div>
	</form>
</body>
</html>
<script type="text/javascript">
	$(function () {
		personList.__repeater('fill');
	});
</script>
